<template>
  <div id="app">
    <!-- 侧边栏 -->
    <div class="flr">
    	<div class="wrap1">
        	<ul>
            	<li><a href="#"><i class="iconfont">&#xe72b;</i></a></li>
                <li><a href="#"><i class="iconfont">&#xe669;</i></a></li>
                <li><a href="#"><i class="iconfont">&#xe622;</i></a></li>
                <li><a href="#"><i class="iconfont">&#xe614;</i></a></li>
                <li><a href="#"><i class="iconfont">&#xe6e7;</i></a></li>
            </ul>
        </div>
        <div class="wrap2">
        	<ul>
            	<li><a href="#"><i class="iconfont">&#xe637;</i></a></li>
                <li><a href="#"><i class="iconfont">&#xe731;</i></a></li>
            </ul>
        </div>
    </div>
    <!-- 顶部小信息导航 -->
    <div class="hdtop">
      <div class="contain">
        <div class="tleft">欢迎来到票景通旅游网！</div>
        <div class="tright">
          <router-link to="/login"><i class="iconfont icon-user"></i> 登录</router-link>│
          <router-link to="/register">注册</router-link>│
          <a href="#"><i class="iconfont icon-gouwuche1"></i> 购物车</a>│
          <a href="#">商户中心</a>│
          <a href="#">代理中心</a>
        </div>
      </div>
    </div>
    <!-- 头部搜索等旅游合作方等 -->
    <div class="hed">
      <div class="contain">
        <div class="logo">
          <a href="#"><img src="./lvystatic/images/logo.png" /></a>
        </div>
        <div class="city">
          <div class="tit1">南宁<i class="iconfont">&#xe606;</i></div>
          <div class="tit2">切换城市</div>
        </div>
        <div class="search">
          <input type="text" placeholder="搜索商品或商店" />
          <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="plogo">
          <img src="./lvystatic/images/qy001.jpg" />
          <img src="./lvystatic/images/qy002.jpg" />
          <img src="./lvystatic/images/qy003.jpg" />
        </div>
      </div>
    </div>
    <!-- 分类导航模块 -->
    <div class="nav">
      <div class="contain">
        <div class="navleft">
          <div class="title">全部分类
            <Dropdown trigger="click" >
              <Icon type="ios-list"></Icon>
              <DropdownMenu slot="list" class="fenlei" >
                <!-- <DropdownItem> -->
                <!-- <div class="fenlei"> -->
                <div class="wrap" style="border-left:6px solid #f39800;">
                  <p>酒店</p>
                  <ul>
                    <li><a href="#">五星豪华</a></li>
                    <li><a href="#">四星高档</a></li>
                    <li><a href="#">三星舒适</a></li>
                  </ul>
                  <i class="iconfont">&#xe679;</i>
                </div>
                <div class="wrap" style="border-left:6px solid #22ac38;">
                  <p>景区</p>
                  <ul>
                    <li><a href="#">5A景区</a></li>
                    <li><a href="#">4A景区</a></li>
                    <li><a href="#">其他景区</a></li>
                  </ul>
                  <i class="iconfont">&#xe679;</i>
                </div>
                <div class="wrap" style="border-left:5px solid #81511c;">
                  <p>旅游路线</p>
                  <ul>
                    <li><a href="#">周边游</a></li>
                    <li><a href="#">自助游</a></li>
                    <li><a href="#">跟团游</a></li>
                  </ul>
                  <i class="iconfont">&#xe679;</i>
                </div>
                <div class="wrap" style="border-left:5px solid #00a0e9;">
                  <p>接驳车</p>
                  <ul>
                    <li><a href="#">旅游大巴</a></li>
                    <li><a href="#">租车</a></li>
                    <li><a href="#">包车</a></li>
                  </ul>
                  <i class="iconfont">&#xe679;</i>
                </div>
                <div class="wrap" style="border-left:5px solid #e4007f;">
                  <p>停车</p>
                </div>
                <div class="wrap" style="border-left:5px solid #eb6100;">
                  <p>特色商城</p>
                </div>
                <div class="wrap" style="border-left:5px solid #0068b7;">
                  <p>餐饮美食</p>
                </div>
                <div class="wrap" style="border-left:5px solid #8fc31f;">
                  <p>当地玩乐</p>
                </div>
                <!-- </div> -->
                <!-- </DropdownItem> -->
                <!-- <DropdownItem>炸酱面</DropdownItem>
                        <DropdownItem disabled>豆汁儿</DropdownItem>
                        <DropdownItem>冰糖葫芦</DropdownItem>
                        <DropdownItem divided>北京烤鸭</DropdownItem> -->
              </DropdownMenu>
            </Dropdown>
          </div>
          <!-- 具体分类模块 -->
          <!-- <div class="fenlei">
                                	<div class="wrap" style="border-left:6px solid #f39800;">
                                    	<p>酒店</p>
                                        <ul>
                                        	<li><a href="#">五星豪华</a></li>
                                            <li><a href="#">四星高档</a></li>
                                            <li><a href="#">三星舒适</a></li>
                                        </ul>
                                        <i class="iconfont">&#xe679;</i>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #22ac38;">
                                    	<p>景区</p>
                                        <ul>
                                        	<li><a href="#">5A景区</a></li>
                                            <li><a href="#">4A景区</a></li>
                                            <li><a href="#">其他景区</a></li>
                                        </ul>
                                        <i class="iconfont">&#xe679;</i>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #81511c;">
                                    	<p>旅游路线</p>
                                        <ul>
                                        	<li><a href="#">周边游</a></li>
                                            <li><a href="#">自助游</a></li>
                                            <li><a href="#">跟团游</a></li>
                                        </ul>
                                        <i class="iconfont">&#xe679;</i>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #00a0e9;">
                                    	<p>接驳车</p>
                                        <ul>
                                        	<li><a href="#">旅游大巴</a></li>
                                            <li><a href="#">租车</a></li>
                                            <li><a href="#">包车</a></li>
                                        </ul>
                                        <i class="iconfont">&#xe679;</i>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #e4007f;">
                                    	<p>停车</p>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #eb6100;">
                                    	<p>特色商城</p>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #0068b7;">
                                    	<p>餐饮美食</p>
                                    </div>
                                    <div class="wrap" style="border-left:6px solid #8fc31f;">
                                    	<p>当地玩乐</p>
                                    </div>
                                </div> -->
        </div>
        <div class="navright">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">团购</a></li>
            <li><a href="#">商城</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">商家</a></li>
            <li><a href="#">达人秀</a></li>
            <li><a href="#">小组</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">优惠券</a></li>
            <li><a href="#">积分商城</a></li>
          </ul>
        </div>
      </div>
    </div>

        <!-- 占位符 -->
        <router-view/>
        <!-- 底部服务说明栏 -->
        <div class="ft">
          <div class="contain">
            <div class="wrap">
              <div class="wrap-1">
                <div class="title"><i class="iconfont">&#xe691;</i> 购买指南</div>
                <div class="list">
                  <ul>
                    <li><a href="#">怎样购物</a></li>
                    <li><a href="#">会员俱乐部</a></li>
                    <li><a href="#">积分制度</a></li>
                    <li><a href="#">优惠券介绍</a></li>
                    <li><a href="#">订单状态说明</a></li>
                  </ul>
                </div>
              </div>
              <div class="wrap-1">
                <div class="title"><i class="iconfont">&#xe625;</i> 支付帮助</div>
                <div class="list">
                  <ul>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">在线支付</a></li>
                    <li><a href="#">邮政汇款</a></li>
                    <li><a href="#">银行转账</a></li>
                    <li><a href="#">发票说明</a></li>
                  </ul>
                </div>
              </div>
              <div class="wrap-1">
                <div class="title"><i class="iconfont">&#xe62a;</i> 配送方式</div>
                <div class="list">
                  <ul>
                    <li><a href="#">普通快递</a></li>
                    <li><a href="#">门票配送</a></li>
                    <li><a href="#">商品物流</a></li>
                  </ul>
                </div>
              </div>
              <div class="wrap-1">
                <div class="title"><i class="iconfont">&#xe705;</i> 服务条款</div>
                <div class="list">
                  <ul>
                    <li><a href="#">售后服务政策</a></li>
                    <li><a href="#">售后特色服务</a></li>
                    <li><a href="#">退换货说明</a></li>
                    <li><a href="#">联系客服</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="contain">
            <div class="ft2">版权所有 票景通信息科技有限公司 技术支持：佳凯智能</div>
          </div>
        </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        visible: true
      }
    }
  }
</script>
  
<style>
  /* 初始化样式 */
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  p,
  blockquote,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  pre,
  form,
  fieldset,
  legend,
  button,
  input,
  textarea,
  th,
  td {
    margin: 0;
    padding: 0;
  }
  body,
  button,
  input,
  select,
  textarea {
    font: 12px/1.5tahoma, arial, \5b8b\4f53;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
  }
  address,
  cite,
  dfn,
  em,
  var {
    font-style: normal;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: couriernew, courier, monospace;
  }
  small {
    font-size: 12px;
  }
  ul,
  ol {
    list-style: none;
  }
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  sup {
    vertical-align: text-top;
  }
  sub {
    vertical-align: text-bottom;
  }
  legend {
    color: #000;
  }
  fieldset,
  img {
    border: 0;
  }
  button,
  input,
  select,
  textarea {
    font-size: 100%;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  #app{
    width: 105%;
  }
  .hed .search i {
    margin-top: -34px;
    float: right;
  }
  .nav .navleft .title {
    line-height: 45px;
  }
  .nav .navleft .title i {
    font-size: 30px;
  }
  .nav .navleft .fenlei {
    left: -183px;
  }
  .nav .navleft .fenlei .wrap i {
    color: #333;
    font-size: 18px
  }
  .ivu-select-dropdown {
    margin: 1px;
    padding: 0;
  }
  .nav .navleft .fenlei .wrap {
    text-align: left;
  }
  wrap {
    height: 30px;
  }
  .nav .navleft .fenlei .wrap p {
    /* margin: 0;
      padding: 0; */
    height: 30px;
    font-size: 14px;
  }
  .wrap ul li {
    padding-top: 5px;
  }
  .wrap ul li a {
    font-size: 14px;
  }
</style>
